<template>
  <div class="alertInfo">
    注意，删除后问卷信息不可恢复，请谨慎操作
<!--    <el-button type="danger" size="small" class="clearQA">清空回收站</el-button>-->
  </div>
  <div class="opBtn">
    <el-button type="primary" size="small" :disabled="!useable" @click="recoverBtn">恢复</el-button>
    <el-button type="danger" size="small" :disabled="!useable" @click="deleteBtn">删除</el-button>
  </div>
  <div>
    <el-table
        height="100%"
        ref="multipleTable"
        :data="this.tableInfo"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="问卷号"
          width="200px">
      </el-table-column>
      <el-table-column
          prop="title"
          label="问卷标题"
          width="200px">
      </el-table-column>
      <el-table-column
          prop="latestPostDate"
          label="发布时间"
          width="200px">
      </el-table-column>
      <el-table-column
          prop="count"
          label="作答数量"
          width="200px">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  //TODO: 是否有点击列表一列就能多选上的方法，用户提亚能提升
  name: "Trash",
  data() {
    return {
      useable: false,
      tableData: this.tableInfo,
      multipleSelection: []
    }
  },
  mounted() {
  },
  props: ['tableInfo'],
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 处理选中列表
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      if (this.multipleSelection.length>=1) {
        this.useable = true
      }
      else {
        this.useable = false
      }
    },

    // 删除按钮工作
    deleteBtn() {
      this.$confirm('此操作将永久删除该问卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.apiDelete(this.multipleSelection)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 恢复按钮工作
    recoverBtn() {
      this.$confirm('此操作将恢复该问卷至"所有问卷"中, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '恢复成功!'
        });
        this.apiRecover(this.multipleSelection)

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消恢复'
        });
      });

    },

    // 获取问卷信息
    // apiGetDeletedInfo() {
    //   let data = {
    //     id: localStorage.getItem('id')
    //   }
    //   axios.post('/api/qamanage/deletedqa', qs.stringify(data)).then(res => {
    //     console.log(res);
    //     for (let item of res.data.data) {
    //       if (item.latestPostDate !== null) {
    //         item.latestPostDate = item.latestPostDate.slice(0,10)
    //       }
    //       this.tableData.push(item)
    //     }
    //   })
    //
    //   if (this.tableData == null) {
    //     console.log('获取删除的问卷信息失败');
    //   }
    // },

    // 恢复问卷api
    apiRecover(selection) {
      let data = {
        qaid: [],
      }

      for (let item of selection) {
        data.qaid.push(item.id)
      }

      axios.post('/api/qamanage/recoverqa', qs.stringify(data ,{arrayFormat: 'repeat',allowDots: true})).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.$router.go(0)
        }
      })
    },

    // 彻底删除问卷api
    apiDelete(selection) {
      let data = {
        qaid: [],
      }

      for (let item of selection) {
        data.qaid.push(item.id)
      }

      axios.post('/api/qamanage/deleteqatot',qs.stringify(data, { indices: false })).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          console.log('删除成功');
          this.$router.go(0)
        }
      })

    },
  },
}
</script>

<style scoped>
  .opBtn {
    margin-bottom: 10px;
    float: left;
  }

  .alertInfo {
    margin-bottom: 20px;
    color: #f84061;
  }

  .clearQA {
    float: right;
  }
</style>